@import './variables.scss';
@mixin reading-text($color: #606266) {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  color: $color;
}
// 文字相关
.#{$prefix}-text-center {
  text-align: center;
}

// 浮动相关
.#{$prefix}-fl {
  float: left;
}
.#{$prefix}-fr {
  float: right;
}

// 边距相关
$sizes: (0, 5, 10, 15, 20);

@for $index from 1 to 6 {
  .#{$prefix}-m-#{nth($sizes, $index)} {
    margin: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mt-#{nth($sizes, $index)} {
    margin-top: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mr-#{nth($sizes, $index)} {
    margin-right: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mb-#{nth($sizes, $index)} {
    margin-bottom: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-ml-#{nth($sizes, $index)} {
    margin-left: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-p-#{nth($sizes, $index)} {
    padding: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pt-#{nth($sizes, $index)} {
    padding-top: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pr-#{nth($sizes, $index)} {
    padding-right: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pb-#{nth($sizes, $index)} {
    padding-bottom: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pl-#{nth($sizes, $index)} {
    padding-left: #{nth($sizes, $index)}px !important;
  }
}

// 快速使用

.#{$prefix}-m {
  margin: 20px !important;
}
.#{$prefix}-mt {
  margin-top: 20px !important;
}
.#{$prefix}-mr {
  margin-right: 20px !important;
}
.#{$prefix}-mb {
  margin-bottom: 20px !important;
}
.#{$prefix}-ml {
  margin-left: 20px !important;
}

.#{$prefix}-p {
  padding: 20px !important;
}
.#{$prefix}-pt {
  padding-top: 20px !important;
}
.#{$prefix}-pr {
  padding-right: 20px !important;
}
.#{$prefix}-pb {
  padding-bottom: 20px !important;
}
.#{$prefix}-pl {
  padding-left: 20px !important;
}

.cursor-pointer {
  cursor: pointer;
}

// ul样式
ul {
  @extend .mg-0;
  @extend .pd-0;
  li {
    @extend .mg-0;
    list-style: none;
  }
}

// 时间选择器中默认今天的样式修改
.ui-picker-panel {
  .today {
    span {
      font-weight: 700;
      border: 1px solid #e3e3e3;
      background: #e3e3e3;
    }
  }
}

input:focus,
textarea:focus,
button:focus {
  outline: none;
}

input::-ms-clear,
::-ms-reveal {
  display: none;
}

.center {
  thead,
  tr {
    th,
    td {
      text-align: center;
    }
  }
}

p {
  @extend .mg-0;
  @extend .pd-0;
}

// form
.main-area {
  input::-webkit-input-placeholder,
  input::-moz-input-placeholder,
  input::-ms-input-placeholder {
    color: #d9d9d9;
  }
}

.justify-center {
  display: flex;
  justify-content: center;
}

// 左对齐
.text-left {
  text-align: left;
}

// 居中
.text-center {
  text-align: center;
}

// 右对齐
.text-right {
  text-align: right;
}

// 边距
.pd-0 {
  padding: 0;
}

.pd-10 {
  padding: 10px !important;
}

.pd-lr-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.pd-bt-10 {
  margin-bottom: 10px;
}

.mg-0 {
  margin: 0;
}

.mg-lt-8 {
  margin-left: 8px;
}

.mg-lt-10 {
  margin-left: 10px;
}

.mg-lt-20 {
  margin-left: 20px;
}

.mg-bt-10 {
  margin-bottom: 10px !important;
}

.mg-bt-20 {
  margin-bottom: 20px;
}

.mg-bt-30 {
  margin-bottom: 30px;
}

.mg-bt-70 {
  margin-bottom: 70px;
}

.mg-top-0 {
  margin-top: 0 !important;
}

.mg-top-10 {
  margin-top: 10px;
}

.mg-top-16 {
  margin-top: 16px;
}

.mg-top-18 {
  margin-top: 18px;
}

.mg-top-20 {
  margin-top: 20px;
}

.mg-top-30 {
  margin-top: 30px;
}

.mg-top-50 {
  margin-top: 50px;
}

.mg-rt-20 {
  margin-right: 20px;
}

.mg-rt-10 {
  margin-right: 10px;
}

// 刷新按钮
.refresh {
  color: $color-text-hover;
}

.search {
  @extend .cursor-pointer;
  vertical-align: sub;
  img {
    height: 20px;
    width: 20px;
  }
}

// 转账结果页面
.text-link {
  line-height: 50px;
  font-size: 14px;
  color: rgb(105, 144, 242);
  span {
    @extend .cursor-pointer;
  }
  .text-link-center {
    color: $color-text-sub;
    padding: 0 5px;
  }
}

.res-info {
  display: table;
  font-size: 14px;
  margin: 10px auto 0;
  margin-bottom: 10px;
  .res-info-title {
    display: inline-block;
    width: 7em;
    text-align: right;
  }
  .res-info-text {
    margin-left: 20px;
    color: #555555;
    font-weight: bold;
    font-size: 14px;
  }
}

// 默认输入框样式
.default-input {
  .ui-date-editor,
  .ui-input,
  .ui-input-group,
  .ui-select {
    width: 300px;
    height: 40px;
  }
}

// 查询表单样式
.query-form {
  display: flex;
  flex-wrap: wrap;
  .ui-form-item {
    margin-bottom: 20px;
    width: 33%;
    @extend .default-input;
    // 账号类型、流水号切换
    .query-form_select {
      width: 300px;
      .ui-input-group__prepend {
        border-right: none;
        .ui-select {
          width: 105px;
          .ui-input {
            width: 100%;
          }
        }
      }
    }
  }
}

// 阅读并勾选
.reading {
  div:first-child {
    line-height: 0;
  }
  .ui-link {
    vertical-align: text-top;
  }
  .ui-link--inner,
  a {
    @include reading-text(#4072ee);
  }
  .ui-checkbox__inner,
  .ui-radio__inner {
    width: 14px;
    height: 14px;
    margin-right: 6px;
  }
  span {
    @include reading-text;
  }
}

/* 字体过多，显示省略号 */

.text-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 弹框取消按钮
.ui-dialog__headerbtn .ui-dialog__close {
  font-size: 20px;
}

// 主要内容区域带有tabs的标题
.header-tabs-title {
  font-size: 20px;
  color: $color-text-main;
  letter-spacing: 0px;
  margin-bottom: -38px;
  line-height: 38px;
  display: block;
}

// 主要内容区域的标题
.header-title {
  font-size: 20px;
  color: $color-text-main;
  letter-spacing: 0px;
  line-height: 38px;
  display: block;
  margin-bottom: 20px;
}

// 按钮水平居中
.btn-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 原生table需要居中的元素统一用的class */

.detail-info-table {
  width: 100%;
  border-collapse: collapse;
  td {
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #333333;
    line-height: 14px;
    border: 1px solid #ccc;
    padding: 0 14px;
    height: 48px;
    border: 1px solid #ebeef5;
    width: 30%;
  }
  /* 表格中的标题部分 */
  .detail-info-table-title {
    background: #f7f9fb;
    background-clip: padding-box;
    text-align: center;
    color: #909399;
    width: 15%;
  }
}

// 标题右侧下载打印按钮样式
.header-right-box {
  float: right;
  .download-btn {
    display: flex;
    color: #606266;
    .info-btn {
      min-width: 70px;
      height: 30px;
      // 图片文字居中
      a {
        font-size: $s14;
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      img {
        width: auto;
        height: 15px;
        margin-right: 4px;
      }
      &:disabled {
        opacity: 0.5;
        background: $color-bg-default;
        border: 1px solid $color-border-7;
        border-radius: 4px;
      }
    }
  }
}